<?php if (!defined('THINK_PATH')) exit();?>
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="Keywords" 			content="Epsilon, mobile, framework, css3, html5, javascript, retina" />
<meta name="Description" 		content="Epsilon based mobile retina webpp template!" />
<!--Favicon shortcut link-->
<link type="image/x-icon"  rel="shortcut icon" href="images/splash/favicon.ico" />
<link type="image/x-icon"  rel="icon"		   href="images/splash/favicon.ico" />
<!--Declare page as mobile friendly --> 
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0"/>
<!-- Declare page as iDevice WebApp friendly -->
<meta name="apple-mobile-web-app-capable" content="yes"/>
<!-- iDevice WebApp Splash Screen, Regular Icon, iPhone, iPad, iPod Retina Icons -->
<link rel="apple-touch-icon" sizes="114x114" href="images/splash/splash-icon.png"> 
<link rel="apple-touch-startup-image" href="images/splash/splash-screen.png" media="screen and (max-device-width: 320px)" /> 
<link rel="apple-touch-startup-image" href="images/splash/splash-screen@2x.png" media="(max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2)" /> 
<link rel="apple-touch-startup-image" href="images/splash/splash-screen@3x.png" sizes="640x1096">

<!-- Page Title -->
<title>Epsilon Framework</title>

<!-- Stylesheet Load -->
<link href="styles/style.css"				rel="stylesheet" 	type="text/css">
<link href="styles/framework-style.css" 	rel="stylesheet" 	type="text/css">
<link href="styles/framework.css" 			rel="stylesheet" 	type="text/css">
<link href="styles/icons.css"				rel="stylesheet" 	type="text/css">
<link href="styles/retina.css" 				rel="stylesheet" 	type="text/css" 	media="only screen and (-webkit-min-device-pixel-ratio: 2)" />

<!--Page Scripts Load -->
<script src="scripts/jquery.min.js"		type="text/javascript"></script>		
<script src="scripts/jquery-ui-min.js"  type="text/javascript"></script>
<script src="scripts/contact.js"		type="text/javascript"></script>
<script src="scripts/swipe.js"			type="text/javascript"></script>
<script src="scripts/klass.min.js"		type="text/javascript"></script>
<script src="scripts/photoswipe.js"		type="text/javascript"></script>
<script src="scripts/colorbox.js"		type="text/javascript"></script>
<script src="scripts/retina.js"			type="text/javascript"></script>
<script src="scripts/modernizr.js"		type="text/javascript"></script>
<script src="scripts/slicebox.js"		type="text/javascript"></script>
<script src="scripts/twitter.js"		type="text/javascript"></script>
<script src="scripts/custom.js"			type="text/javascript"></script>
</head>

<body>

<div id="preloader">
	<div id="status">
    	<p class="center-text">
			<em>Loading the content...</em>
            <em>Loading depends on your connection speed!</em>
        </p>
    </div>
</div>

<div class="header-decoration"></div>

<div class="nav-page-icons content">
	<a href="index.html"		id="nav0" class="go-index">Home</a>
	<a href="home.html" 		id="nav1" class="go-home">Intro</a>
    <a href="about.html" 		id="nav2" class="go-about">About</a>
    <a href="features.html" 	id="nav3" class="go-features">Features</a>
    <a href="gallery.html" 		id="nav4" class="go-gallery">Gallery</a>
    <a href="portfolio.html" 	id="nav5" class="go-portfolio">Portfolio</a>
    <a href="blog.html" 		id="nav6" class="go-blog">Blog</a>
    <a href="blog-post.html" 	id="nav7" class="go-post">Blog Posts</a>
    <a href="contact.html" 		id="nav8" class="go-mail">Mail Us</a>
    <a href="tel:+1234567890"	id="nav9" class="go-call">Call Us</a>
    <a href="sms:+1234567890"	id="nav10" class="go-text">Text Us</a>
    <a href="#" 				id="navc" class="go-close">Close Navigation</a>
    <div class="nav-decoration decoration"></div>
</div>

<div class="header">
	<a href="index.html" class="deploy-share"></a>
	<h4>Welcome</h4>
	<a href="#" class="deploy-menu"></a>
	<div class="decoration"></div>
</div>

<img src="images/logo/logo.png" alt="img" class="replace-2x logo" width="148">

<div class="content">
	<div class="decoration"></div>
    <div class="container no-bottom">
   		<h4 class="icon-heading">Regular Portfolio Full Width</h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean iaculis erat sit amet sapien tempor et eleifend risus faucibus. Maecenas id nibh ut magna adipiscing porta a sit amet sem. Aenean adipiscing tincidunt purus, ac rhoncus lacus laoreet viverra. Nunc commodo metus eget metus congue iaculis. </p>
    	<div class="decoration"></div>
        <div class="portfolio-item-full-width">
        	<h4>A full width portfolio item!</h4>
    		<a href="images/gallery/full/002.jpg">
            	<img class="responsive-image" src="images/gallery/full/004.jpg" alt="img">
                Image Caption Goes Here
            </a>
            <p>We like portfolios a lot! We've optimized them to the extreme to make them work like a charm on mobiles!</p>
    	</div>
        <div class="decoration"></div>
    	<div class="portfolio-item-full-width">
        	<h4>A full width portfolio item!</h4>
    		<a href="images/gallery/full/002.jpg">
            	<img class="responsive-image" src="images/gallery/full/002.jpg" alt="img">
                Image Caption Goes Here
            </a>
            <p>We like portfolios a lot! We've optimized them to the extreme to make them work like a charm on mobiles!</p>
    	</div>
    </div>	
    
    <div class="decoration"></div>
    
        <div class="container no-bottom">
   		<h4 class="icon-heading">Two Thumb Portfolio</h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean iaculis erat sit amet sapien tempor et eleifend risus faucibus. Maecenas id nibh ut magna adipiscing porta a sit amet sem. Aenean adipiscing tincidunt purus, ac rhoncus lacus laoreet viverra. Nunc commodo metus eget metus congue iaculis. </p>
		<div class="decoration"></div>
    	<div class="column">
        	<div class="portfolio-item-thumb one-half">
            	<h4>Image Title</h4>
            	<a href="images/gallery/full/001.jpg">
                	<img class="responsive-image" src="images/gallery/thumb/001.jpg" alt="img">
                    Image Caption
                </a>
                <p>
               		Lorem ipsum dolor sit amet, consecr adipiscing elit. Aenean iaculis erat site amet sapien tempor et eleifend risus faucibus. 
                </p>
            </div>
            <div class="portfolio-item-thumb one-half">
            	<h4>Image Title</h4>
            	<a href="images/gallery/full/001.jpg">
                	<img class="responsive-image" src="images/gallery/thumb/002.jpg" alt="img">
                    Image Caption
                </a>
                <p>
               		Lorem ipsum dolor sit amet, consecr adipiscing elit. Aenean iaculis erat site amet sapien tempor et eleifend risus faucibus. 
                </p>
            </div>
        </div>  
        
    	<div class="column">
        	<div class="portfolio-item-thumb one-half">
            	<h4>Image Title</h4>
            	<a href="images/gallery/full/001.jpg">
                	<img class="responsive-image" src="images/gallery/thumb/003.jpg" alt="img">
                    Image Caption
                </a>
                <p>
               		Lorem ipsum dolor sit amet, consecr adipiscing elit. Aenean iaculis erat site amet sapien tempor et eleifend risus faucibus. 
                </p>
            </div>
            <div class="portfolio-item-thumb one-half">
            	<h4>Image Title</h4>
            	<a href="images/gallery/full/001.jpg">
                	<img class="responsive-image" src="images/gallery/thumb/004.jpg" alt="img">
                    Image Caption
                </a>
                <p>
               		Lorem ipsum dolor sit amet, consecr adipiscing elit. Aenean iaculis erat site amet sapien tempor et eleifend risus faucibus. 
                </p>
            </div>
        </div> 
         
    </div>  
    <div class="decoration"></div>
  
	<div class="container">		
		<h3>Filtrable Portfolio</h3>
        <p>Filtralbe portfolios are awesome but they are nearly imposible to use on a mobile, or ar they? Problem solved! </p>     
        
        <a href="#" class="button grey" id="filter-one">1</a>
        <a href="#" class="button grey" id="filter-two">2</a>
        <a href="#" class="button grey" id="filter-three">3</a>
        <a href="#" class="button grey" id="filter-all">Show All!</a>
        
        
         <ul id="gallery-filtralbe" class="gallery-filtrable">
            <li>
            	<a class="filter-one" href="images/gallery/full/001.jpg">
            		<img src="images/gallery/thumb/001.jpg" alt="img" />
                    <p class="filtrable-caption">Empire</p>
                </a>
            </li>
            <li>
            	<a class="filter-one" href="images/gallery/full/002.jpg">
            		<img src="images/gallery/thumb/002.jpg" alt="img" />
                   <p class="filtrable-caption">Snow Stuff</p>
                </a>
            </li>
            <li>
            	<a class="filter-one" href="images/gallery/full/003.jpg">
            		<img src="images/gallery/thumb/003.jpg" alt="img" />
                    <p class="filtrable-caption">Empire</p>
                </a>
            </li>
            <li>
            	<a class="filter-two" href="images/gallery/full/004.jpg">
            		<img src="images/gallery/thumb/004.jpg" alt="img" />
                    <p class="filtrable-caption">SYDNEY</p>
                </a>
            </li>
            <li>
            	<a class="filter-two" href="images/gallery/full/005.jpg">
            		<img src="images/gallery/thumb/005.jpg" alt="img" />
                   <p class="filtrable-caption">VINTAGE</p>
                </a>
            </li>
            <li>
            	<a class="filter-three" href="images/gallery/full/006.jpg">
            		<img src="images/gallery/thumb/006.jpg" alt="img" />
                    <p class="filtrable-caption">OUTDOORS</p>
                </a>
            </li>
        </ul> 
	</div>  
    
    
    <div class="decoration"></div>
</div>

<div class="footer no-bottom">
	<p class="center-text footer-text">Copyright 2012<br>All rights reseved.</p>
</div>

<div class="footer-decoration"></div>

</body>
</html>